<script setup lang="ts">
import { ref, onMounted, computed } from 'vue'
import { useAppStore } from '../stores/app'
import { useRouter } from 'vue-router'
import { useI18n } from 'vue-i18n'
import { availableLocales, type Locale } from '../i18n'

const appStore = useAppStore()
const router = useRouter()
const { t } = useI18n()

const isMaximized = ref(false)

// 计算当前语言名称
const currentLocaleName = computed(() => {
  const locale = availableLocales.find(loc => loc.code === appStore.currentLocale)
  return locale ? locale.name : ''
})

// Call initTheme on mount
onMounted(() => {
  appStore.init()
})

// Window control methods
const handleMinimize = () => {
  window.elec?.minimize()
}

const handleMaximize = () => {
  window.elec?.maximize()
  isMaximized.value = !isMaximized.value
}

const handleClose = () => {
  window.elec?.close()
}

// Navigate to routes
const navigateTo = (route: string) => {
  router.push(route)
}

// 切换语言
const switchLanguage = (locale: Locale) => {
  appStore.changeLocale(locale)
}
</script>

<template>
  <div class="app-layout">
    <!-- Title bar -->
    <div class="title-bar">
      <div class="title">Electron Vite Vue</div>
      <div class="window-controls">
        <el-button size="small" circle @click="handleMinimize">
          <el-icon><Minus /></el-icon>
        </el-button>
        <el-button size="small" circle @click="handleMaximize">
          <el-icon><FullScreen v-if="!isMaximized" /><CopyDocument v-else style="transform: rotate(180deg);" /></el-icon>
        </el-button>
        <el-button size="small" circle type="danger" @click="handleClose">
          <el-icon><Close /></el-icon>
        </el-button>
      </div>
    </div>
    
    <!-- Main content area -->
    <div class="content-area">
      <!-- Sidebar -->
      <div class="sidebar-container">
        <el-menu 
          class="sidebar"
          :collapse="appStore.sidebarCollapsed"
          :default-active="$route.path"
          router
        >
          <el-menu-item index="/" @click="navigateTo('/')">
            <el-icon><HomeFilled /></el-icon>
            <span>{{ t('common.home') }}</span>
          </el-menu-item>
          <el-menu-item index="/about" @click="navigateTo('/about')">
            <el-icon><InfoFilled /></el-icon>
            <span>{{ t('common.about') }}</span>
          </el-menu-item>
          <el-menu-item index="/database" @click="navigateTo('/database')">
            <el-icon><DataAnalysis /></el-icon>
            <span>{{ t('common.database') || '数据库' }}</span>
          </el-menu-item>
        </el-menu>
        
        <div class="sidebar-footer" :class="{ 'collapsed': appStore.sidebarCollapsed }">
          <!-- 侧边栏折叠按钮 -->
          <el-button 
            circle 
            size="small"
            :title="appStore.sidebarCollapsed ? t('common.expand') : t('common.collapse')"
            :icon="appStore.sidebarCollapsed ? 'Menu' : 'Fold'" 
            @click="appStore.toggleSidebar" 
          />
          
          <!-- 主题切换按钮 -->
          <el-button 
            circle
            size="small"
            :title="appStore.theme === 'light' ? t('common.theme.dark') : t('common.theme.light')"
            :icon="appStore.theme === 'light' ? 'Moon' : 'Sunny'" 
            @click="appStore.toggleTheme" 
          />
          
          <!-- 语言切换下拉菜单 -->
          <el-dropdown 
            trigger="click" 
            @command="switchLanguage"
            v-if="!appStore.sidebarCollapsed"
          >
            <el-button 
              size="small" 
              icon="Help"
              :title="t('common.switchLanguage')"
            >
              {{ currentLocaleName }}
            </el-button>
            <template #dropdown>
              <el-dropdown-menu>
                <el-dropdown-item 
                  v-for="locale in availableLocales" 
                  :key="locale.code"
                  :command="locale.code"
                  :disabled="appStore.currentLocale === locale.code"
                >
                  {{ locale.name }}
                </el-dropdown-item>
              </el-dropdown-menu>
            </template>
          </el-dropdown>
          
          <!-- 折叠状态下的语言切换图标按钮 -->
          <el-dropdown 
            v-else
            trigger="click" 
            @command="switchLanguage"
            placement="right"
          >
            <el-button 
              circle
              size="small"
              icon="Help"
              :title="t('common.switchLanguage') + ': ' + currentLocaleName"
            />
            <template #dropdown>
              <el-dropdown-menu>
                <el-dropdown-item 
                  v-for="locale in availableLocales" 
                  :key="locale.code"
                  :command="locale.code"
                  :disabled="appStore.currentLocale === locale.code"
                >
                  {{ locale.name }}
                </el-dropdown-item>
              </el-dropdown-menu>
            </template>
          </el-dropdown>
        </div>
      </div>
      
      <!-- Main content -->
      <main class="main-content">
        <slot></slot>
      </main>
    </div>
  </div>
</template>

<style scoped>
.app-layout {
  height: 100%;
  display: flex;
  flex-direction: column;
}

.title-bar {
  height: 35px;
  background-color: var(--el-color-primary-light-9);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 10px;
  -webkit-app-region: drag; /* Make the header draggable */
}

.title {
  font-weight: bold;
  font-size: 14px;
}

.window-controls {
  display: flex;
  gap: 5px;
  -webkit-app-region: no-drag; /* Make buttons clickable */
}

.content-area {
  flex: 1;
  display: flex;
  overflow: hidden;
}

.sidebar-container {
  display: flex;
  flex-direction: column;
  height: 100%;
  border-right: 1px solid var(--el-border-color-lighter);
}

.sidebar {
  flex: 1;
  height: calc(100% - 70px);
  border-right: none;
}

.sidebar-footer {
  display: flex;
  gap: 0.5rem;
  justify-content: center;
  padding: 1rem;
  width: 200px;
  box-sizing: border-box;
  border-top: 1px solid var(--el-border-color-lighter);
  background-color: var(--el-menu-bg-color);
}

.sidebar-footer.collapsed {
  width: 64px;
  flex-direction: column;
  padding: 0.75rem 0;
  gap: 0.75rem;
  align-items: center;
  background-color: var(--el-menu-bg-color);
}

.sidebar-footer.collapsed .el-button {
  margin: 0;
}

.main-content {
  flex: 1;
  overflow: auto;
  background-color: var(--el-bg-color);
}
</style> 